<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch"/>
    <Student/>  
  </div>
</template>

<script>
  import School from './components/School.vue'
  import Student from './components/Student.vue'
  export default {
    name:'App',
    data(){
      return{
        msg:'你好啊'
      }
    },
    components:{
      School,
      Student,
    },
    methods:{
      showDOM(){
        //对于不同的元素，输出的ref不同
        console.log(this.$refs.title) //用于元素--真实DOM元素
        console.log(this.$$refs.btn)  //用于元素--真实DOM元素
        console.log(this.$$refs.sch)  //用于子组件--School组件的实例对象VC
      }
    }
  }
</script>
